<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title>优酷</title>
    <style>
        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        nav {
            width: 100%;
            height: 60px;
            background-color: #ccc;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .con li {
            display: block;
            float: left;
            margin: 6px;
            margin-top: 18px;
            position: relative;
        }

         .con>li>a {
            display: block;
            height: 40px;
        } 

        .juji {
            position: absolute;
            top: 40px;
            right: -115px;
            width: 245px;
            height: 150px;
            /* border: 1px solid red; */
            background-color: #ddd;
            display: none;
        }

        .juji li {
            width: 110px;
            height: 30px;
            margin-top: 5px;
            text-align: left;
        }

        .more {
            position: absolute;
            top: 40px;
            right: -50px;
            width: 120px;
            height: 150px;
            background-color: #ddd;
            /* border: 1px solid red; */
            display: none;
        }

        .more li {
            width: 110px;
            height: 30px;
            margin-top: 5px;
            text-align: center;
        }

        a:hover {
            color: #b8813c;
        }

        .juji .active,
        .more .active {
            background-image: url(1.png);
            background-position: -112px 0;
            position: absolute;
            width: 13px;
            height: 8px;
            top: -13px;
            left: 100px;
        }

        .more .active {
            left: 50px;
        }

        .icon {
            display: inline-block;
            background-image: url(1.png);
            background-position: -60px 0;
            width: 10px;
            height: 8px;
            top: 10px;
            left: 35px;
            position: absolute;
            transition: all 0.3s linear;
        }

        .con>li:hover .juji {
            display: block;
        }

        .con>li :hover .icon {
            transform: rotate(180deg);
        }

        .con>li:hover .more {
            display: block;
        }
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <ul class="con">
                <li style="border-bottom:2px solid blue;"><a style="color:#3388ff;" href="#">首页</a></li>
                <li><a href="#">剧集</a>
                    <ul class="juji">
                        <li class="active"><a href="#"></a></li>
                        <li><a href="#">楚乔传 TV版</a></li>
                        <li><a href="#"> 春风十里不...</a></li>
                        <li><a href="#">镇魂街 第一季</a></li>
                        <li><a href="#">我的前半生</a></li>
                        <li><a href="#">醉玲珑</a></li>
                        <li><a href="#">微微一笑很...</a></li>
                        <li><a href="#">终极三国2017</a></li>
                        <li><a href="#">龙珠传奇</a></li>
                    </ul>
                </li>
                <li><a href="#">电影</a>
                    <ul class="juji">
                        <li class="active"><a href="#"></a></li>
                        <li><a href="#">速度与激情8</a></li>
                        <li><a href="#">人间大炮</a></li>
                        <li><a href="#">战狼</a></li>
                        <li><a href="#">杀破狼2</a></li>
                        <li><a href="#">逆时营救</a></li>
                        <li><a href="#">记忆大师</a></li>
                        <li><a href="#">我的外星女友</a></li>
                        <li><a href="#">有部电影</a></li>
                    </ul>
                </li>
                <li><a href="#">综艺</a>
                    <ul class="juji">
                        <li class="active"><a href="#"></a></li>
                        <li><a href="#">极限挑战第...</a></li>
                        <li><a href="#">挑战者联盟</a></li>
                        <li><a href="#">脑洞大开第...</a></li>
                        <li><a href="#">火星情报局</a></li>
                        <li><a href="#">暴走漫画一</a></li>
                        <li><a href="#">日日煮2017</a></li>
                        <li><a href="#">开心俱乐部...</a></li>
                        <li><a href="#">举杯呵呵喝...</a></li>
                    </ul>
                </li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">少儿</a>
                    <ul class="juji">
                        <li class="active"><a href="#"></a></li>
                        <li><a href="#">宝狄与好友...</a></li>
                        <li><a href="#">小猪佩奇</a></li>
                        <li><a href="#">纳米核心 第...</a></li>
                        <li><a href="#">汪汪队立大...</a></li>
                        <li><a href="#">我的汤姆猫...</a></li>
                        <li><a href="#">会说话的家族</a></li>
                        <li><a href="#">小伶玩具</a></li>
                        <li><a href="#">棉花糖和云...</a></li>
                    </ul>
                </li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">咨讯</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">文化</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">高效</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">更多 <i class="icon"></i></a>
                    <ul class="more">
                        <li class="active"><a href="#"></a></li>
                        <li><a href="#">VR</a></li>
                        <li><a href="#">生活</a></li>
                        <li><a href="#">原创</a></li>
                        <li><a href="#">排行</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>
<!-- <script>
    var lis = document.querySelectorAll('nav li');
    var la = document.querySelectorAll('.container a')
    var ner = document.querySelectorAll('.juji li')
    var arise = document.querySelectorAll('.juji')
    var more = document.querySelectorAll('.more li')
    var active = document.querySelectorAll('.active')
    for (var i = 0; i < ner.length; i++) {
        ner[i].index = i;
        ner[i].onmouseover = function () {
            arise[this.index].className = ''
        }
        ner[i].onmouseout = function () {
            arise[this.index].style.display = 'none';
        }
    }

</script> -->